<template>
    <div class="head">
        <div class="log">AI翻译器</div>
        <div class="help">帮助中心</div>
    </div>
    <section class="main">
        <div class="box">
            <div class="title">
                <div class="lang">
                    <span class="lang-item">{{state.from}}</span>
                    <i class="iconfont icon-shanglajiantou"></i>

                </div>
                <i class="iconfont icon-shuangxiangzhuanhuanjiantou" @click="changeLang"></i>
                <div class="lang">
                    <span class="lang-item">{{state.to}}</span>
                    <i class="iconfont icon-shanglajiantou"></i>

                </div>
            </div>
            <div class="content">
                <div class="input item">
                    <textarea @keydown.enter="handle" v-model="state.inputText" placeholder="请输入要翻译的文本" id=""></textarea>
                </div>
                <div class="output item">
                    <textarea disabled placeholder="翻译结果将在这里显示" id="">{{ state.outputText }}</textarea>
                </div>
            </div>
        </div>
    </section>
</template>

<script setup>
import { reactive } from "vue";
import axios from "axios";

const state = reactive({
    from:'English',
    to:'中文',
    inputText:'',
    outputText:''
})
const changeLang = () => {
    const {from,to} = state;
    state.from=to;
    state.to=from;
}
const handle = () => {
    //将用户输入的内容传给后端
   axios.get(`http://localhost:3000?inputText=${state.inputText}`)
   .then(response =>{
       state.outputText = response.data;
   })
}

</script>

<style lang="css" scoped>
.head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 80px;
    background-color: #FFF;
    border-bottom: 1px solid #e5e5e5;
}
.head .log{
    font-size: 20px;
}
.head .help{
    font-size: 14px;
}
.main{
    overflow: hidden;
}
.box{
    width: 896px;
    height: 296px;
    background: #FFF;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
    border-radius: 8px 8px 8px 8px;
    margin: 0 auto;
    margin-top: 32px;
    padding: 24px ;
    box-sizing: border-box;
}
.title{
    display: flex;
    align-items: center;
}
.lang{
    width: 86px;
    height: 40px;
    background-color: #F3F4F6;
    border-radius: 8px 8px 8px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.icon-shuangxiangzhuanhuanjiantou{
    margin: 0 16px;
    font-weight: 700;
    cursor: pointer;
}
 .content{
    display: flex;
    margin-top: 16px;
}
.content .item{
    flex: 1;
    height: 200px;

}
.content .item:first-child{
    margin-right: 16px;
}
.content .item textarea{
    width: 100%;
    height: 100%;
    border-radius: 8px;
    padding: 10px 6px;
    box-sizing: border-box;
    font-size: 18px;
}
</style>